<!--
 * @Description: 配套出库
 * @Autor: 商晓彬
 * @Date: 2021-09-01 10:01:30
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-12-27 13:39:23
-->
<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade qmbopinsert" tabindex="-1"
    role="dialog" aria-labelledby="createOrEditModal" aria-hidden="true"
    [config]="{backdrop: 'static', keyboard: !saving}">
    <div style="width:1880px!important;margin: 1.75rem auto;">
        <div class="modal-content">
            <form *ngIf="active" #userForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>配套出库</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div>
                        <div class="m-content">
                            <div class="row">
                                <div class="col-lg-4">
                                    <span class="title">配套信息</span>
                                    <div class="m-content">
                                        <div class="m-portlet m-portlet--mobile">
                                            <div class="m-portlet__body">
                                                <div class="row align-items-center">
                                                    <div class="primeng-datatable-container">
                                                        <div class="p-formgroup-inline">
                                                            <div style="display: flex;">
                                                                <label class="lwid"
                                                                    style="margin-top: 5px;margin-right: 10px;">*型号:</label>
                                                                <p-dropdown filter="true" name="module"
                                                                    [options]="moduleOptions" placeholder="请选择型号"
                                                                    [(ngModel)]="module" emptyFilterMessage="暂无数据"
                                                                    (onChange)="getLotNo($event)">
                                                                    <ng-template let-item pTemplate="selectedItem">
                                                                        <span
                                                                            style="vertical-align:middle; margin-left: .5em;width: 117px;">{{item.label}}</span>
                                                                    </ng-template>
                                                                    <ng-template let-model pTemplate="item">
                                                                        <div class="ui-helper-clearfix"
                                                                            style="position: relative;height: 25px;">
                                                                            <div
                                                                                style="font-size:14px;float:right;margin-top:4px;width: 117px;">
                                                                                {{model.label}}
                                                                            </div>
                                                                        </div>
                                                                    </ng-template>
                                                                </p-dropdown>
                                                                <label class="lwid"
                                                                    style="margin-top: 5px;margin-left: 20px;margin-right: 10px;">*发次:</label>
                                                                <p-dropdown filter="true" name="sendTime"
                                                                    [options]="sendTimeOptions" placeholder="请选择发次"
                                                                    [(ngModel)]="sendTime" emptyFilterMessage="暂无数据">
                                                                    <ng-template let-item pTemplate="selectedItem">
                                                                        <span
                                                                            style="vertical-align:middle; margin-left: .5em;width: 117px;">{{item.label}}</span>
                                                                    </ng-template>
                                                                    <ng-template let-model pTemplate="item">
                                                                        <div class="ui-helper-clearfix"
                                                                            style="position: relative;height: 25px;">
                                                                            <div
                                                                                style="font-size:14px;float:right;margin-top:4px;width: 117px;">
                                                                                {{model.label}}
                                                                            </div>
                                                                        </div>
                                                                    </ng-template>
                                                                </p-dropdown>
                                                                <button pButton type="button" label="查询"
                                                                    (click)="getTreeInfo()"
                                                                    style="margin-left: 40px"></button>
                                                            </div>
                                                            <div style="display: flex;"></div>
                                                        </div>
                                                        <div class="col-md-12" style="
                                                                float: left;
                                                                height: 529px;
                                                            ">

                                                            <p-tree [value]="files2" selectionMode="single"
                                                                [(selection)]="selectedFiles"
                                                                (onNodeSelect)="nodeSelect($event)"
                                                                [style]="{ height: '90%' }" [loading]="loadingtree">
                                                                <ng-template let-node pTemplate="default">
                                                                    <img class="imgcontent"
                                                                        src="../../../assets/common/images/三级图标.png"
                                                                        *ngIf="node.nodeLevel==8||node.nodeLevel==9"
                                                                        width="20" height="20" />
                                                                    <img class="imgcontent"
                                                                        src="../../../assets/common/images/0.png"
                                                                        *ngIf="node.nodeLevel=='undefind'" width="20"
                                                                        height="20" />
                                                                    <img class="imgcontent"
                                                                        src="../../../assets/common/images/1.png"
                                                                        *ngIf="node.nodeLevel==1" width="20"
                                                                        height="20" />
                                                                    <img class="imgcontent"
                                                                        src="../../../assets/common/images/2.png"
                                                                        *ngIf="node.nodeLevel==2" width="20"
                                                                        height="20" />
                                                                    <img class="imgcontent"
                                                                        src="../../../assets/common/images/3.png"
                                                                        *ngIf="node.nodeLevel==3" width="20"
                                                                        height="20" />
                                                                    <img class="imgcontent"
                                                                        src="../../../assets/common/images/4.png"
                                                                        *ngIf="node.nodeLevel==4" width="20"
                                                                        height="20" />
                                                                    <img class="imgcontent"
                                                                        src="../../../assets/common/images/5.png"
                                                                        *ngIf="node.nodeLevel==5" width="20"
                                                                        height="20" />
                                                                    <span
                                                                        *ngIf="node.key==-1">{{node.techniqueName}}-{{node.techniqueNumber}}
                                                                    </span>
                                                                    <span
                                                                        *ngIf="node.key!=-1">{{node.nodeDrawingNo}}-{{node.nodeName}}</span>
                                                                    <span class="ptagisRelation"
                                                                        *ngIf="node.isRelation==1&&node.isExport!=1">{{node.isRelation==1?'已关联':''}}</span>
                                                                    <span class="ptagisExport"
                                                                        *ngIf="node.isExport==1">{{node.isExport==1?'已导出':''}}</span>
                                                                </ng-template>
                                                            </p-tree>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <!-- 右侧 -->
                                    <!-- <div class="p-formgroup-inlined flex" style="margin-top: 25px;">
                                        <div class="flex">
                                            <label style="margin-top: 5px;margin-right: 5px;">型号:</label>
                                            <input readonly style=" width:100px;height: 35px;margin-right: 10px;" name="productDrawingNos"
                                                type="text" [(ngModel)]="form.productDrawingNo" />
                                        </div>
                                        <div class="flex">
                                            <label style="margin-top: 5px;margin-right: 5px;">发次:</label>
                                            <input readonly style=" width:100px;height: 35px;margin-right: 10px;" name="productDrawingNos"
                                                type="text" [(ngModel)]="form.productDrawingNo" />
                                        </div>
                                        <div class="flex">
                                            <label style="margin-top: 5px;margin-right: 5px;">芯级:</label>
                                            <input readonly style=" width:100px;height: 35px;margin-right: 10px;" name="productDrawingNos"
                                                type="text" [(ngModel)]="form.productDrawingNo" />
                                        </div>
                                        <div class="flex">
                                            <label style="margin-top: 5px;margin-right: 5px;">部套:</label>
                                            <input readonly style=" width:100px;height: 35px;margin-right: 10px;" name="productDrawingNos"
                                                type="text" [(ngModel)]="form.productDrawingNo" />
                                        </div>
                                        <div class="flex">
                                            <label style="margin-top: 5px;margin-right: 5px;">规程图号:</label>
                                            <input readonly style=" width:100px;height: 35px;margin-right: 10px;" name="productDrawingNos"
                                                type="text" [(ngModel)]="form.productDrawingNo" />
                                        </div>
                                        <div class="flex">
                                            <label style="margin-top: 5px;margin-right: 5px;">规程名称:</label>
                                            <input readonly style=" width:100px;height: 35px;margin-right: 10px;" name="productDrawingNos"
                                                type="text" [(ngModel)]="form.productDrawingNo" />
                                        </div>
                                        <div class="flex">
                                            <label style="margin-top: 5px;margin-right: 5px;">工序号:</label>
                                            <input readonly style=" width:100px;height: 35px;margin-right: 10px;" name="productDrawingNos"
                                                type="text" [(ngModel)]="form.productDrawingNo" />
                                        </div>
                                        <div class="flex">
                                            <label style="margin-top: 5px;margin-right: 5px;">工步:</label>
                                            <input readonly style=" width:100px;height: 35px;margin-right: 10px;" name="productDrawingNos"
                                                type="text" [(ngModel)]="form.productDrawingNo" />
                                        </div>
                                    </div> -->
                                    <div class="row align-items-center" style="margin-top: 25px;">
                                        <div class="primeng-datatable-container">
                                            <p-treeTable [lazy]="true" [value]="files1" [scrollable]="true"
                                                [(selection)]="selectedTreeTable"
                                                (onNodeUnselect)="onNodeUnselect($event)">
                                                <ng-template pTemplate="header">
                                                    <tr>
                                                        <th *ngIf="stepFlag" [class]="stepFlag ? 'first':'wid80'">选择</th>
                                                        <th *ngIf="stepFlag" [class]="stepFlag ? 'second':'wid200'">No.</th>
                                                        <th *ngIf="stepFlag" [class]="stepFlag ? 'third':'wid250'">操作</th>
                                                        <th [class]="stepFlag ? 'fourth':'wid150'">图号</th>
                                                        <th style="width: 150px">物料名称</th>
                                                        <th style="width: 150px">规格</th>
                                                        <th style="width: 150px">物料层级</th>
                                                        <th style="width: 150px">物料类别</th>
                                                        <th style="width: 150px">单位</th>
                                                        <th style="width: 150px">工艺用量</th>
                                                        <th style="width: 150px">配套数量</th>
                                                        <th style="width: 150px">缺料数量</th>
                                                        <th style="width: 150px">待出库数</th>
                                                        <th style="width: 150px">已出库数</th>
                                                        <th style="width: 150px">配套状态</th>
                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                                                    <tr [ttRow]="rowNode" *ngIf="rowData">
                                                        <td *ngIf="stepFlag" [class]="stepFlag ? 'first':'wid80'">
                                                            <p-treeTableCheckbox [value]="rowNode"
                                                                [disabled]="rowData.nodeLevel == 9">
                                                            </p-treeTableCheckbox>
                                                        </td>
                                                        <td *ngIf="stepFlag" [class]="stepFlag ? 'second':'wid200'">
                                                            <p-treeTableToggler [rowNode]="rowNode">
                                                            </p-treeTableToggler>
                                                            {{rowData.level}}
                                                        </td>
                                                        <td *ngIf="stepFlag" [class]="stepFlag ? 'third':'wid250'">
                                                            <span>
                                                                <button [hidden]="rowData.nodeLevel == 9" type="button"
                                                                    class="form-btn"
                                                                    (click)="check(rowNode)">选择出库</button>
                                                                <button [hidden]="rowData.nodeLevel == 9" type="button"
                                                                    class="form-btn"
                                                                    (click)="watch(rowNode)">查看</button>
                                                            </span>
                                                        </td>
                                                        <td [class]="stepFlag ? 'fourth':'wid150'">{{rowData.productDrawingNo}}</td>
                                                        <td style="width: 150px">{{rowData.productName}}</td>
                                                        <td style="width: 150px">{{rowData.module}}</td>
                                                        <td style="width: 150px">{{rowData.materialsLevel}}</td>
                                                        <td style="width: 150px">{{rowData.materialTypeName}}</td>
                                                        <td style="width: 150px">{{rowData.unit}} </td>
                                                        <td style="width: 150px">{{rowData.processDosage}}</td>
                                                        <td style="width: 150px">{{rowData.suiteStock}}</td>
                                                        <td style="width: 150px">{{rowData.shortageNum}}</td>
                                                        <td style="width: 150px">{{rowData.outboundQuantity}}</td>
                                                        <td style="width: 150px">{{rowData.outboundedNum}}</td>
                                                        <td style="width: 150px">{{rowData.assortState}}</td>
                                                    </tr>
                                                </ng-template>
                                            </p-treeTable>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="justify-content: center;">
                    <button pButton type="button" label="取消" (click)="close()" style="margin-left: 0.5rem"></button>
                    <button pButton type="button" label="出库" (click)="save()" style="margin-left: 0.5rem"></button>
                </div>
            </form>
        </div>
    </div>
    <!-- 选择出库 -->
    <app-back-warehouse #BackWarehouseComponent [choose]="chooseSon" [editData]="rowData" [flag]="chooseFlag"
        [title]="title" [table]="oldTable" (modalSave)="backToEx($event)"></app-back-warehouse>
</div>